<%@page language="java"%>
<%
String desde=(String)request.getParameter("desde");
String hasta=(String)request.getParameter("hasta");

if(desde==null)
	desde="";
if(hasta==null)
	hasta="";

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>

<title>Localizador GPS</title>
<style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
</style>

<style type="text/css">
    .on {color:red}
    .off {color:black}
</style>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANdXnaDQ5-BE42sETh1OnBxSeFQxS9BfaeYOTB7YDKkufq6biNhTq2kD2XSUxkrEVwfrdBqRf00sWlg" type="text/javascript" charset="utf-8"></script>

<script language="javascript"  type="text/javascript">
//<![CDATA[

var http_request = false;

var map;
var gMarker=new GMarker(0, 0);
var points = [];
var gPolyline = new GPolyline([0 ,0], [0, 0]);
var time;
var ruta;
var datos;
var i=0;
var mostrarRuta=false;
var distancia=0;
var latitudAnterior;
var longitudAnterior;

var direccion=1;
var reproducir=true;
var timer;

function load() {
    if (GBrowserIsCompatible()) {

	var url="/GoogleGPS/ServletGoogleGPS?p=getRuta&desde=<%=desde%>&hasta=<%=hasta%>";

	map = new GMap2(document.getElementById("map"));
        document.getElementById("espera").style.display="block";
        document.getElementById("datos").style.display="none";
        document.getElementById("map").style.display="none";

	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(0, 0), 16);
	map.setMapType(G_HYBRID_MAP);

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
                 } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = alertContents;
        http_request.open('GET', url, true);
        http_request.send(null);

    }
}

function alertContents() {
    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            datos=http_request.responseText;
    	    ruta=datos.split("#");

            if(ruta.length<=1) {
                alert("No hay datos de recorrido en el intervalo de tiempo seleccionado");
                history.back(1);
	    } else {
            	document.getElementById("espera").style.display="none";
            	document.getElementById("datos").style.display="block";
            	document.getElementById("map").style.display="block";

      	    	results=ruta[1].split(";");

      	    	var grados;
      	    	var latitudNMEA=results[1];
      	    	var longitudNMEA=results[2];
      	    	grados=Math.floor(latitudNMEA/1000000);
      	    	if(grados<0)
		    grados=grados+1;
      	    	latitudAnterior=(latitudNMEA/1000000-grados)/0.6+grados;
      	    	grados=Math.floor(longitudNMEA/1000000);
      	    	if(grados<0)
		    grados=grados+1;
      	    	longitudAnterior=(longitudNMEA/1000000-grados)/0.6+grados;

            	timer=window.setTimeout("mueve();", 300);
	    }
        } else {
            alert('Se ha producido un error al obtener la ruta.');
            history.back(1);
        }
    }
}



function mueve() {

    try {

      i=i+direccion;
      if(i<1)
	i=1;
      if(i>ruta.length-1)
	i=ruta.length-1;

      results=ruta[i].split(";");

      var grados;
      var latitudNMEA=results[1];
      var longitudNMEA=results[2];


      grados=Math.floor(latitudNMEA/1000000);
      if(grados<0)
	grados=grados+1;
      var latitud=(latitudNMEA/1000000-grados)/0.6+grados;
      grados=Math.floor(longitudNMEA/1000000);
      if(grados<0)
	grados=grados+1;
      var longitud=(longitudNMEA/1000000-grados)/0.6+grados;

      var dx=6370*(latitud-latitudAnterior)*Math.PI/180;
      var dy=6370*Math.cos(latitud*Math.PI/180)*(longitud-longitudAnterior)*Math.PI/180;
      distancia+=direccion*Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2));
      latitudAnterior=latitud;
      longitudAnterior=longitud;

      var point = new GLatLng(latitud, longitud);
      if(points.length>=1000)
	points.shift();
      points.push(point);

      if(mostrarRuta) {
	map.removeOverlay(gPolyline);
	gPolyline=new GPolyline(points);
	map.addOverlay(gPolyline);
      }

      map.removeOverlay(gMarker);
      gMarker=new GMarker(point, null);
      map.addOverlay(gMarker);

      var timestamp=results[0].split(" ");
      var fecha=timestamp[0];
      var hora=timestamp[1];
      var velocidad=Math.round(results[3] / 10);

      if(hora != time) {
        map.panTo(new GLatLng(latitud, longitud));
        time = hora;
      }

      document.datos.fecha.value=fecha;
      document.datos.hora.value=hora + " GMT";
      document.datos.velocidad.value=velocidad + " km/h";
      document.datos.distancia.value=Math.round(distancia*1000)/1000 + " km";

      
    
    } catch (err) {alert(err.description);}
    if(reproducir==true)
      timer=window.setTimeout("mueve();", 1000);

}

function back() {
    direccion=-1;
    document.getElementById("forward").className="off";
    document.getElementById("back").className="on";
}


function play(boton) {
  if(reproducir) {
    boton.value="play";
    reproducir=false;
    clearTimeout(timer);
  } else {
    boton.value="stop";
    reproducir=true;
    mueve();
  }
}

function forward() {
    direccion=1;
    document.getElementById("forward").className="on";
    document.getElementById("back").className="off";
}

function step() {
    if(reproducir==false)
      mueve();
}

function fReset() {
    distancia=0;
    document.datos.distancia.value="0 km";
    
}

function fMostrarRuta(boton) {
    if(mostrarRuta) {
      map.removeOverlay(gPolyline);
      boton.value="Mostrar Ruta";
      mostrarRuta=false;
    } else {
      gPolyline=new GPolyline(points);
      map.addOverlay(gPolyline);
      boton.value="Ocultar Ruta";
      mostrarRuta=true;
    }
}


//]]>
</script>

</head>

<body onload="load()" onunload="GUnload()">
  <h2>Localizador GPS</h2>
  <hr>
  <div id="map" style="width: 500px; height: 300px"></div>

  <div id="datos">
  
    <input type="button" name="back" value="back" onClick="back();"/>
    <input type="button" name="play" value="stop" onClick="play(this);"/>
    <input type="button" name="forward" value="forward" onClick="forward();"/>&nbsp; &nbsp; &nbsp;
    <input type="button" name="step" value="step" onClick="step();"/> <br/>
    <input type="button" name="mostrarRuta" value="Mostar Ruta" onClick="fMostrarRuta(this);"/>

    <br/><br/>
    <form name="datos" action="null">
        Datos de la posici&oacute;n actual:
	<table>
	<tr><td>Fecha: </td><td><input type="text" name="fecha"/></td></tr>
	<tr><td>Hora: </td><td><input type="text" name="hora"/></td></tr>
	<tr><td>Velocidad: </td><td><input type="text" name="velocidad"/></td></tr>
	<tr><td>Distancia Recorrida: </td><td><input type="text" name="distancia"/></td><td><input type="button" name="reset" value="reset" onClick="fReset();"/></td></tr>
	</table>
    </form>

        <a href="/GoogleGPS/ServletGoogleGPS?p=guardarGoogle&desde=<%=desde%>&hasta=<%=hasta%>&offline=true">Guardar en local</a> | <a href="Principal.jsp">Volver</a> | <a href="/GoogleGPS/ServletGoogleGPS?p=desconectar">Salir</a>
  </div>

  <div id="espera">

    <h3><font color="red">ESPERA UN MOMENTO, POR FAVOR...</font></h3>

  </div>

</body>

</html>


